<template>
	<div class="menu_two">
		<ol>
			<li v-for="item in list" :key="item.id">
				<p>
					<img :src="item.img"/>
				</p>
				<aside>
					<span v-if="item.title!=undefined">{{item.title}}</span>
					<p>{{item.txt}}</p>
					<label v-if="item.price!=undefined">￥<strong>{{item.price}}</strong><a>起</a></label>
					<em>{{item.time}}</em>
				</aside>
			</li>
		</ol>
	</div>
</template>

<script>
	export default{
		name:'Menu_two',
		data(){
			return{
				list:[
					{id:1,img:'twoimg/1.jpg'},
					{id:2,img:'twoimg/2.jpg',title:'长沙出发',txt:'[徒步桂林]11-3月暖冬季：广西&湖南大穿越，2大神奇地貌，龙脊梯田4寨连穿，览人文风景精华 崀山丹霞全景-阳朔十里画廊-遇龙河-兴坪山水-相公山轻户外6日',price:'3180',time:'7天6晚'},
					{id:3,img:'twoimg/3.jpg',title:'恩施出发',txt:'[穿越大湘西]2021经典穿越，船行体验感十足！用脚步丈量湖南，长沙-清风峡-张家界-借母溪-船行酉水-芙蓉镇-坐龙峡-边城茶峒，湖南小众轻徒步户外深度7日游',price:'3080',time:'7天6晚'},
					{id:4,img:'twoimg/4.jpg',title:'邓州出发',txt:'[征途·神农架]2021年无人区徒步，超越自我“无人之境”认识真正的自己！挑夫伴你行，轻装神农架穿越原始森林，露营高山草甸，冲顶老君山，4天3晚无人区穿越之旅！',price:'1560',time:'5天4晚'},
					{id:5,img:'twoimg/5.jpg',title:'巴厘出发',txt:'[徒步恩施秘境]可提前一晚离开！2021神秘北纬30度，屏山峡谷-恩施大峡谷-鹿院坪-利川-清江古河床，鹿院坪感受世外桃源，清江古河床徒步，“湖北的香格里拉”徒步7日游！',price:'4080',time:'8天7晚'},
					{id:6,img:'twoimg/6.jpg',title:'成都出发',txt:'[征途南太行•经典版]元旦假期，八里沟-抱犊村-莲花村-郭亮挂壁，秘境穿越，武功山进阶，用脚步丈量太行山，户外人必走的徒步穿越线（5日经典）！',price:'2680',time:'5天4晚'},
					{id:7,img:'twoimg/7.png',title:'成都出发',txt:'[小众印尼 • 爪哇浮生]巴厘岛/泗水集合，东方摩洛哥「玛琅」彩虹奇缘-任抹帕布玛避世海滩-布罗莫火山沙海日出-宜珍魔幻蓝火-马达将军冥想瀑布，爪哇远东8天7晚极致之旅',price:'1680',time:'4天3晚'},
					{id:8,img:'twoimg/8.jpg',title:'南宁出发',txt:'[纳米比亚 • 生灵/沙丘/星河/瀚海]2022狂野非洲上海出发+埃托沙公园+鲸湾火烈鸟+海豹皮划艇+45号沙丘+死亡谷+箭袋树星空露营+红泥人村庄拜访,12日越野卡车团',price:'3180',time:'5天4晚'},
					{id:9,img:'twoimg/9.jpg',title:'汉中出发',txt:'[库拉岗日转山]喜马拉雅徒步三部曲，朝圣库拉岗日，羊卓雍措转湖，折公措三神湖-白玛琳措-介久措-普莫雍措-日托寺，西藏入门徒步优选，6日轻装徒步之旅（无需露营）',price:'2850',time:'4天3晚'},
					{id:10,img:'twoimg/10.jpg',title:'南宁出发',txt:'[雪山攀登 • 四姑娘山二峰]登顶5276米，颁发纪念奖牌，5000米入门级雪山攀登体验，公用马匹装载行李，5日雪山圆梦之旅（新增大海子露营适应，增加登顶成功率）',price:'3190',time:'5天5晚'},
				]
			}
		}
	}
</script>

<style scoped>
	.menu_two{
		width: 100%;
		overflow: hidden;
		background-color: #efefef;
	}
	.menu_two ol li{
		width: 48%;
		margin: 1%;
		float: left;
		border-radius: 0.6rem;
		background-color: white;
		position: relative;
	}
	.menu_two li:first-child img{
		width: 100%;
		height: 100%;
		border-radius: 0.6rem;
	}
	.menu_two li:first-child{
		width: 48%;
		height: 16rem;
	}
	
	.menu_two li img{
		width: 100%;
		height: 100%;
		border-radius: 0.6rem 0.6rem 0 0;
	}
	.menu_two li span{
		position: absolute;
		top: 0;
		right: 0;
		padding: 0.5rem 1rem;
		background-color: rgba(0,0,0,0.6);
		border-radius: 0 0.5rem 0 0.5rem;
		color: white;
	}
	.menu_two li aside p{
		margin: 0.2rem 0.5rem;
		font-weight: bold;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
	}
	.menu_two li aside label{
		display: block;
		padding: 0.2rem 0.5rem;
		float: left;
		color: gray;
	}
	.menu_two li aside label strong{
		color: orange;
		font-weight: bold;
		font-size: 1rem
	}
	.menu_two li aside em{
		padding: 0.2rem 0.5rem;
		float: right;
		color: #808080;
	}
	.menu_two li:nth-of-type(even){
		margin-top: 1rem;
	}
</style>
